<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>parallel coordinates2</title>
		<script src="d3/d3.v3.js"></script>
        <script src="d3/d3.parcoords.js"></script>
        <!--<script src="http://d3js.org/d3.v3.min.js"></script>-->

        <link rel="stylesheet" type="text/css" href="css/d3.parcoords.css">
    </head>
    <body>
        <div id="example2" class="parcoords" style="width:1000px;height:150px"></div>

        <script>

var data2 = d3.range(0,2*Math.PI,Math.PI/40)
  .map(function(x) {
    return {
      "-x": -x,
      x: x,
      "sin(x)": Math.sin(x),
      "cos(x)": Math.cos(x),
      "atan(x)": Math.atan(x),
      "exp(x)": Math.exp(x),
      "square(x)": x*x,
      "sqrt(x)": Math.sqrt(x),
    };
  });

var pc2 = d3.parcoords()("#example2");

pc2
  .data(data2)
  .color("rgba(100,000,100)")
  .alpha(0.2)
  .margin({ top: 24, left: 0, bottom: 12, right: 0 })
  .render()
  .reorderable();

		</script>
    </body>
</html> 





